﻿@page "/components/Icons"
@using System.Reflection

<DocsPage>
    <DocsPageHeader Title="Icons" SubTitle="Guidance and suggestions for using icons with MudBlazor.">
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Icons">
                <Description>
                    See the full list of all icons that comes preloaded here: <MudLink Href="/features/icons">MudBlazor Icons</MudLink>
                </Description>
            </SectionHeader>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Usage">
                <Description>The MudIcon component shows the specified icon with the chosen style. You can use the <CodeInline>Title</CodeInline> attribute to improve accessibility with screen readers and show a tooltip on mouse over.</Description>
            </SectionHeader>
            <SectionContent Code="IconsUsageExample">
                <IconsUsageExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Color">
            </SectionHeader>
            <SectionContent Code="IconsColorExample">
                <IconsColorExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Size">
            </SectionHeader>
            <SectionContent Code="IconsSizeExample">
                <IconsSizeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Material Variants">
                <Description>Material icons that comes loaded with MudBlazor by default is available in Filled, Outlined, Rounded, Sharp and TwoToned.</Description>
            </SectionHeader>
            <SectionContent Code="IconsMaterialVariantsExample">
                <IconsMaterialVariantsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Font Icons">
                <Description>The MudIcon component will display any icon font that supports ligatures.<br />For example, you can use <MudLink Color="Color.Secondary" Href="https://fontawesome.com/">Font Awesome</MudLink>.</Description>
            </SectionHeader>
            <SectionContent Code="IconsFontAwesomeExample">
                <IconsFontAwesomeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Change Icon By Programmatically">
                <Description>The icon parameter of the other components are determined as strings. 
                So changing the icon is as easy as assigning a new string.</Description>
            </SectionHeader>
            <SectionContent Code="ChangeIconByProgrammaticallyExample">
                <ChangeIconByProgrammaticallyExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
